<template lang="html">
	<div class="he">
	  <div class="remind">
	   	<router-link tag="div" to="/index/home/course/detaile" class="arrow">
	   		<img class="imga"src="../../images/jiantou3.png">
	   		
	   	</router-link>
	   	<div class="reminde">提 醒</div>
	  </div>
	  <div>
		  <div class="tution">
		  	<span class="spane">开课提醒</span>
		  	<div class="appear"  @click="timeHandler">
		  		<el-switch v-model="value2" active-color="#13ce66" inactive-color="#CCCCCC"></el-switch>
		  	</div>
		  </div>
		  <div class="timing" v-show="flge">
		  	<div class="cheek">
		  		<span>课前</span>
		  		<ul>
		  			<li  class="cheek_li" v-for="(item,index) in timingArr" >{{ item }}</li>
		  		</ul>
		  		<span>分钟</span>
		  	</div>
		  </div>
	  </div>
	  <router-view></router-view>
	</div>
</template>

<script>
export default {
  name:"remind",
  data(){
    return{
    	value1: true,
    	value2: false,
    	flge:false,
    	timingArr:["10","20","30","40","50","60"]
    }
  },
  methods:{
  	timeHandler(){
  		this.flge = !this.flge
  	}
  }
}
</script>

<style scoped lang="less">
html{font-size:16px !important;}
.remind{
	height: 90/100rem;
	background: #3DAE95;
	display: flex;
	.arrow{
		line-height: 80/100rem;
		.imga{
			width: 50/100rem;
			
		}
	}
	.reminde{
		color: #ffffff;
		font-size: 35/100rem;
		text-align: center;
		width: 100%;
		text-align: center;
		line-height: 100/100rem;
		
	}

}
.tution{
	display: flex;
	margin-top: 10/100rem;
	height: 90/100rem;
	background: #ffffff;
	border-bottom: 1px solid #999999;
		.spane{
		line-height:90/100rem;
		margin-left: 20/100rem;
		font-size: 30/100rem;
		flex: 1;
	}
	.el-switch{

		flex: 1;
		margin-right: 20/100rem;
		margin-bottom: 35/50rem;
	}
	.appear{
		height: 16/100rem;
	}
	
}
.timing{
	background: #fff;
	text-align: center;
	height: 500/100rem;
	
	display:flex;
    justify-content:center;
    align-items:center;
    // overflow: hidden;
    box-sizing: border-box;

	.cheek{
		// height: 10s0/50rem;
		width: 100%;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		display: flex;
		height: 50/100rem;
		box-sizing: border-box;
		span{
			flex: 1;
			display: inline-block;
			line-height: 50/100rem;
			height: 50/100rem;
			font-size: 30/100rem;
		}
		ul{

			overflow-y: scroll;
			li{
			line-height: 50s/100rem;
			font-size: 30/100rem;
			
		}
		}
		

	}
	

}


</style>
